<template>
  <div class="navshop">
    <div class="logo">
      <img src="../assets/logo.png" alt="" />
      <input type="text" placeholder="搜索" />
    </div>

    <div class="nav">
      <!--  -->
      <van-tabs
        sticky
        @click="onClick"
        background="#ff448f"
        color="#fff"
        title-active-color="#fff"
        title-inactive-color="#fff"
      >
        <van-tab title="首页" name="a"><Home /></van-tab>
        <van-tab
          v-for="(item, index) in list"
          :title="item.cate_name"
          :key="index"
        >
          <h3 class="top"></h3>
          <div class="content">
            <div class="NavChild">
              <div
                class="NavChild-nav"
                v-for="(item, index) in goodlist"
                :key="index"
                @click="handsid(item.id, a, index)"
                :class="index == tabIndex ? 'active' : ''"
              >
                <h3>
                  <img :src="item.pic" alt="" />
                </h3>
                <p>{{ item.cate_name }}</p>
              </div>
            </div>
            <div class="content-shopcard">
              <div
                class="shopcard"
                v-for="(itm, index) in innavList"
                :key="index"
                @click="handlepass(itm.id)"
              >
                <img :src="itm.image" alt="" />
                <p>{{ itm.store_name }}</p>
                <h3><span>￥</span>{{ itm.price }}</h3>
              </div>
            </div>
          </div>
          <!-- <NavShop /> -->
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import ShopCard from "../components/ShopCard";
import { getlist } from "../api/goods";
import Vue from "vue";
import { Sticky } from "vant";
import { Toast } from "vant";
import Home from "./Home.vue";
import { navShopList } from "../api/nav";
// import NavShop from "./NavShop.vue";
import { Tab, Tabs } from "vant";


Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Sticky);
export default {
  components: {
    ShopCard,
    Home,
    // NavShop,
  },
  data() {
    return {
      list: [], //导航数据
      goodlist: [], //子导航数据
      num: 0,
      tabIndex: 0,
      innavList: [], //card数据
      sid: 0,
      a: 0,
      x: 0,
    };
  },
  created() {
    getlist().then((res) => {
      this.list = res.data.data;
    });
  },
  methods: {
    onClick(name) {
      if (name > 0) {
        getlist().then((res) => {
          let sub = res.data.data;
          this.goodlist = sub[name - 1].children;
        });
        this.a = this.list[name - 1].id;
        if (name == 1) {
          this.x = 10;
        }
        if (name == 2) {
          this.x = 190;
        }
        if (name == 3) {
          this.x = 193;
        }
        if (name == 4) {
          this.x = 201;
        }
        if (name == 5) {
          this.x = 230;
        }
        if (name == 6) {
          this.x = 208;
        }
        if (name == 7) {
          this.x = 229;
        }
        if (name == 8) {
          this.x = 226;
        }

        navShopList(this.x, this.list[name - 1].id).then((res) => {
          this.innavList = res.data.data;
        });
        
      } else {
        name = 1;
      }
     this. tabIndex=0
    },

    handsid(sid, a, i) {
      this.tabIndex = i;
      navShopList(sid,a).then((res) => {
        this.innavList = res.data.data;
      });
    },
    handlepass(idx) {
      this.$router.push({ path: `/detail/${idx}` });
    },
  },
};
</script>

<style lang="less" scoped>
.navshop {
  width: 100%;
  background: #f1f1f1;
  height: 100vh;
}
.top {
  width: 100%;
  background: #ff448f;
  height: 10px;
}
.logo {
  // height: 150px;
  background: #ff448f;
  display: flex;
  justify-content: space-around;
  padding: 5px;
  img {
    width: 84px;
    height: 30px;
    margin-top: 5px;
    margin-left: 5px;
  }
  input {
    padding: 5px 10px;
    width: 245px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #f1f1f1;
  }
}
.nav {
  // margin-top: -110px;
  // padding-bottom: 10px;
  // background: #ff448f;
  .van-tab__text {
    width: 56px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.navshop {
  background: #f1f1f1;
}
.content {
  width: 100%;
}

.NavChild {
  height: 70px;
  width: 100%;
  overflow: auto;
  padding: 10px 0;
  display: flex;
  background: #f1f1f1;
  margin-top: 10px;
  //   justify-content: space-around;
  .NavChild-nav.active h3 {
    border: 1px solid #ff448f;
  }
  .NavChild-nav {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
      font-size: 12px;
      line-height: 20px;
      width: 62px;
      text-align: center;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  h3 {
    width: 43px;
    text-align: center;
    height: 43px;
    border-radius: 50%;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
}
.content-shopcard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 10px 50px;
  background: #f1f1f1;
}

.shopcard {
  width: 21vh;
  height: 228px;
  margin-bottom: 10px;
  margin: 10px 2px;
  text-align: center;
  background: #fff;
  border-radius: 15px;
  img {
    width: 100%;
    height: 172px;
    border-radius: 15px 15px 0 0;
  }
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding: 2px 10px;
  }
  h3 {
    text-align: left;
    font-size: 18px;
    color: #e93323;
    padding: 0px 10px;
    span {
      font-size: 13px;
    }
  }
}
</style>
